iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 29
0
自我挑戰組

網頁排版個人學習筆記系列 第 29

RWD| off Canvas(滑動導航)選單設計

  • 分享至 

  • xImage
  •  

off Canvas(滑動導航)選單設計示意圖

步驟
如果依DAY17 滑動導航效果 offcanvas 的方式架構HTML,到了動態執行jQuery會不好處裡。所以這邊就先把區塊分為container、aside、main

  • 先依順序把html架構好(桌機→768px以下-平板+手機)
    • container包覆著.aside、main
<div class="wrap">
    <div class="container">
      <div class="aside">...</div>
      <div class="main">...</div>
        <div class="content">...</div>
    </div>
</div>

環境: 以768px為桌機與平板的斷點。從768px以上開始架構

  • .aside隱藏
    • 設定.container與.aside的絕對相對位置,讓.aside追隨container
    • .container設定x軸 0以外的元素皆隱藏 ,.aside設定寬度,並往左移一個aside區塊的寬度,在.container中隱藏
    • .aside使用 transform(css3語法)網頁效能會比margin 、top、left好
.container{
    position:relative;
/*.container x軸0以外的元素皆隱藏*/
    transform:translateX(0);
    overflow:hidden;
}
.aside{
  position:absolute;
    width: 270px; /*寬度可自訂*/
    transform:translateX(-270px);
/*填入.aside寬度,填負數往左移一個aside寬度。得以隱藏是因上方.container設定*/
}

https://ithelp.ithome.com.tw/upload/images/20190930/20119743Q6fgAp6SWl.png

https://ithelp.ithome.com.tw/upload/images/20190930/20119743QLlrjDprar.png

環境: 768px以下架構

  • .aside顯示,.main中的.menu隱藏
    • .aside從上方設定的-270滑入0的位置,顯示於.container上方
    • .main中的.menu使用max-hight:0; overflow: hidden; 隱藏
  • 設定完後,在使用jQuery執行動態就可有按下menu按鈕,aside從左方滑入效果。

※註 :可參閱做法相似的DAY17 滑動導航效果 offcanvas

/
transform 屬性功能
可對元素進行旋轉、縮放、移動或傾斜。

transform 屬性參考文章
MDN web docs- transform
W3school- CSS3 transform 屬性
CSS動畫-Transition、Animation、Transform的分析比較


上一篇
RWD| 常見響應式選單-2
下一篇
RWD|SASS 基本環境架設與初步教學
系列文
網頁排版個人學習筆記30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言